<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>06_箭头函数</title>
</head>
<body>
<button id="btn">测试箭头函数this_1</button>
<button id="btn2">测试箭头函数this_2</button>
<!--
* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点：
    1、简洁
    2、箭头函数没有自己的 this，箭头函数的 this 不是调用的时候决定的，而是在定义的时候处在的对象就是它的 this
    3、扩展理解：箭头函数的 this 看外层的是否有函数，
        如果有，外层函数的 this 就是内部箭头函数的 this，
        如果没有，则 this 是 window。
-->
<script type="text/javascript">
  let fun = function () {
    console.log('fun()');
  };
  fun();

  // 没有形参，并且函数体只有一条语句
  let fun1 = () => console.log('fun1()');
  fun1();
  console.log(fun1());

  // 一个形参，并且函数体只有一条语句
  let fun2 = x => x;
  console.log(fun2(5));

  // 形参是一个以上
  let fun3 = (x, y) => x + y;
  console.log(fun3(25, 39)); // 64

  // 函数体有多条语句
  let fun4 = (x, y) => {
    console.log(x, y);
    return x + y;
  };
  console.log(fun4(34, 48)); // 82

  setTimeout(() => {
    console.log(this);
  }, 1000)

  // 测试箭头函数的 this
  let btn = document.getElementById('btn');
  let btn2 = document.getElementById('btn2');

  // 没有箭头函数
  btn.onclick = function () {
    console.log(this); // btn
  };
  // 箭头函数
  let obj = {
    name: 'kobe',
    age: 39,
    getName: () => {
      btn2.onclick = () => {
        console.log(this); // obj
      };
    }
  };
  obj.getName();


  function Person() {
    this.obj = {
      showThis: () => {
        console.log(this);
      }
    }
  }

  let fun5 = new Person();
  fun5.obj.showThis();
</script>
</body>
</html>
